<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <!-- <link rel="stylesheet" href="../css/aui.css"> -->
</head>
<style>
    html,
    body {
        background-color: #fff;
    }

    .placeholder_div {
        background-color: #fbf9f9;
    }

    .main {
        padding: 0 1rem;
    }

    .daikaifang {
        color: #565656;
        font-size: 0.8rem;
        height: 2.2rem;
        line-height: 2.2rem;
        border-bottom: 1px solid #e8e8e8;
    }

    .daikaifang img {
        height: 0.8rem;
        width: 0.4rem;
        float: right;
        margin-top: 0.75rem;

    }

    .total_item {
        background-color: #fff;
        height: 5rem;
        line-height: 5rem;
        position: relative;
        margin-bottom: 0.1rem;
    }

    .total_item .user_avater {
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
    }

    .total_item .sex {
        width: 1.5rem;
        height: 0.8rem;
        line-height: 0.8rem;
        text-align: center;
        background-color: #fff;
        border: 1px solid #E8E8E8;
        border-radius: 0.2rem;
        font-size: 0.5rem;
        color: #565656;
        position: absolute;
        bottom: 0.4rem;
        left: 0.25rem;
    }

    .total_item .total_item_right {
        width: 80%;
        height: 90%;
        line-height: 100%;
        float: right;
        border-bottom: 1px solid #e8e8e8;
        position: relative;
    }

    .total_item .total_item_right .total_item_right_name {
        color: #565656;
        font-size: 12px;
        position: absolute;
        top: 1.2rem;
        left: 0;
        font-weight: bold;
    }

    .total_item .total_item_right .total_item_right_info {
        color: #838383;
        font-size: 12px;
        position: absolute;
        bottom: 0.5rem;
        left: 0;
        width: 100%;
    }

    .total_item .total_item_right .total_item_right_time {
        color: #838383;
        font-size: 12px;
        position: absolute;
        top: 0.8rem;
        right: 0;
    }

    .total_item .total_item_right .total_item_right_time img {
        width: 0.7rem;
        height: 0.7rem;
    }

    .total_item .total_item_right .total_item_right_time span {
        margin-left: 0.5rem;
    }

    .total_item:active {
        background-color: #f5f5f5;
    }

    .none {
        font-size: 14px;
        margin: 0.5rem 0;
        text-align: center;
    }

    .tips {
        position: absolute;
        right: 0.25rem;
        bottom: 0.6rem;
        width: 0.8rem;
        height: 0.8rem;
        text-align: center;
        line-height: 0.8rem;
        font-size: 12px;
        background-color: #F75348;
        color: #fff;
        border-radius: 50%;
    }
</style>

<body>
    <div class="main" id="app" v-cloak>
        <div class="total_div">
            <div class="total_item" v-for="(item, index) in chats" @click="fnOpenChat(item, index)">
                <img class="user_avater" v-if="item.latestMessage.ext.toAvatar" :src="item.latestMessage.ext.toAvatar"
                    alt="">
                <img class="user_avater" v-else src="../../image/user_avater.png" alt="">
                <!-- <p class="sex">男</p> -->

                <div class="total_item_right">
                    <p class="total_item_right_name"
                        v-if="item.latestMessage.ext.toName && item.latestMessage.direction=='send'">
                        {{item.latestMessage.ext.toName}}
                    </p>
                    <p class="total_item_right_name"
                        v-else-if="item.latestMessage.ext.fromName && item.latestMessage.direction=='receive'">
                        {{item.latestMessage.ext.fromName}}
                    </p>
                    <p class="total_item_right_name"
                        v-else>
                        患者
                    </p>
                    <p class="total_item_right_name"
                        v-else-if="!item.latestMessage.ext.fromName || !item.latestMessage.ext.toName">{{item.latestMessage.ext.toName}}</p>
                    <p class="total_item_right_info p_hide" v-if="item.latestMessage.ext.card == '1'">
                        [就诊卡]
                    </p>
                    <p class="total_item_right_info p_hide" v-else-if="item.latestMessage.ext.card == '2'">
                        [处方]
                    </p>
                    <p class="total_item_right_info p_hide" v-else-if="item.latestMessage.ext.card == '0'">
                        {{item.latestMessage.body.text}}
                    </p>
                    <p class="total_item_right_time">
                        <img @click.stop="delChat(item.conversationId)" src="../../image/icon_del.png" alt="">
                        <span v-if="item.latestMessage.localTime">|&nbsp;
                            &nbsp;{{item.latestMessage.localTime|formatTime}}</span>
                        <p class="tips" v-if="item.unreadMessagesCount">{{item.unreadMessagesCount}}</p>
                    </p>
                </div>
            </div>

            <!-- 已经没有更多了 -->
            <div class="none" v-if="chats.length == 0">已经没有更多了</div>

        </div>

    </div>
</body>

</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<!-- 消除移动端点击延迟300ms -->
<script type="text/javascript" src="../../script/chat/fastclick.js"></script>
<!-- 公共js -->
<script type="text/javascript" src="../../script/chat/common.js"></script>
<!-- 环信接口 -->
<script type="text/javascript" src="../../script/chat/easeChat.js"></script>
<!-- sha1加密 -->
<script type="text/javascript" src="../../script/chat/SHA1.js"></script>
<!-- 滑动 -->
<script type="text/javascript" src="../../script/chat/swiper.js"></script>
<script type="text/javascript">
    apiready = function () {
        init()
        /**
        status: 0  待支付
        status: 1  待接诊
        status: 2  问诊中
        status: 3  问诊结束
        status: -1  已取消
        **/
        api.addEventListener({
            name: 'nowClick'
        }, function (ret, err) {
            app.fnGetAllConversations()
        });
    }

    function init() {
        app = new Vue({
            el: "#app",
            data: {
                chats: [], // 会话列表
            },
            created: function () {

            },
            mounted: function () {
                var that = this;
                this.$nextTick(function () {
                    // 初始化数据
                    that.fnInit();
                    // 初始化下拉刷新
                    that.fnsetRefreshHeaderInfo();
                    //环信会话接口请求
                    that.fnGetAllConversations();
                });
            },
            methods: {
                fnInit: function () {
                    if (typeof $api.getStorage("emp") == "undefined") {
                        api.confirm({
                            title: '您需要先登录哦！',
                            msg: '点击确认跳到登录页面',
                            buttons: ['先逛逛', '确定']
                        }, function (ret, err) {
                            var index = ret.buttonIndex;
                            if (index == 2) { //确认跳转登录页面
                                api.openWin({
                                    name: 'login',
                                    url: 'widget://html/login.html',
                                    slidBackEnabled: false,
                                    reload: true
                                });
                            }
                        });
                    }
                },
                fnsetRefreshHeaderInfo: function () {
                    var that = this;
                    api.setRefreshHeaderInfo({
                        loadingImg: 'widget://image/refresh.png',
                        bgColor: '#ccc',
                        textColor: '#fff',
                        textDown: '下拉刷新...',
                        textUp: '松开刷新...'
                    }, function (ret, err) {
                        //在这里从服务器加载数据，加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
                        api.refreshHeaderLoadDone();
                        if (ret) {
                            that.fnGetAllConversations();
                        } else {
                            toast(err.msg);
                        }
                    });
                },
                //打开聊天窗口
                fnOpenChat: function (item, index) {
                    var that = this;
                    var conversationid = item.conversationId
                    if (item.latestMessage.direction == "receive") {
                        var toId = item.latestMessage.from ? item.latestMessage.from : null;
                    } else if (item.latestMessage.direction == "send") {
                        var toId = item.latestMessage.to ? item.latestMessage.to : null;
                    }
                    var consultationId = item.latestMessage.ext ? item.latestMessage.ext.consultationId :
                        null;
                    var number = item.unreadMessagesCount;
                    api.openWin({
                        name: 'chat',
                        url: './chat_win.html',
                        slidBackEnabled: true,
                        pageParam: {
                            conversationId: conversationid,
                            userId: String(toId),
                            consultationId: consultationId
                        }
                    });
                    setTimeout(function () {
                        if (number > 0) {
                            that.chats[index].unreadMessagesCount = 0;
                        };
                        // 点击消除对应最消息数
                        fnMarkAllMessagesAsRead(conversationid);
                        //获取储存的总消息数
                        var eTotal = $api.getStorage('unread_total');
                        // 总消息数减去点击对应的消息数  得到剩余的消息数_result
                        var _result = eTotal - number;
                        // 刷新一下main导航下的消息数
                        if (_result >= 0) {

                            that.fnNewsBadge();
                        }
                    }, 200)
                },
                // 获取环信会话列表
                fnGetAllConversations: function () {
                    var that = this
                    //this.delChat("2627316964820022317");
                    easeChat = api.require('easeChat');
                    easeChat.getAllConversations(function (ret) {
                        var _total = 0;
                        for (var i in ret.conversations) {
                            _total += ret.conversations[i].unreadMessagesCount;
                        }
                        //存储未读消息总数
                        $api.setStorage('unread_total', _total);
                        //刷新底部导航消息数
                        that.fnNewsBadge(_total);
                        console.log(JSON.stringify(ret.conversations), "+=====")
                        if (ret.conversations.length > 0) {
                            that.chats = ret.conversations;
                        } else {
                            toast("没有更多咨询记录");
                        }
                    });
                },
                // 设置最新消息数
                fnNewsBadge: function (_number) {
                    if (_number >= 0) {
                        $api.setStorage('unread_total', _number);
                    }
                    if (_number < 99) {
                        $api.setStorage('show_unread_total', _number);
                    } else {
                        $api.setStorage('show_unread_total', '99+');
                    }
                },
                delChat: function (conversationId) {
                    var that = this;
                    var easeChat = api.require('easeChat');
                    api.confirm({
                        title: '请注意',
                        msg: "您确定要删除该医生吗？",
                        buttons: ['确定', '取消']
                    }, function (ret, err) {
                        var index = ret.buttonIndex;
                        if (index == 1) {
                            that.fnEaseChatDeleteConversation(conversationId, 1);
                        }
                    });
                },
                //删除会话
                fnEaseChatDeleteConversation: function (conversationId_, isDelete_) {
                    var that = this;
                    var easeChat = api.require('easeChat');
                    easeChat.deleteConversation({
                        conversationId: conversationId_,
                        isDeleteMessages: isDelete_ //是否删除会话中的消息
                    }, function (ret, err) {
                        if (ret) {
                            if (ret.status === true) {
                                that.fnCloseNew();
                                toast('即时通讯：聊天记录清空成功');
                                //  刷新一下列表
                                that.fnGetAllConversations();
                            } else {
                                toast('糟糕，开小差了');
                            }
                        } else {
                            toast('糟糕，开小差了');
                        }
                    });
                },
                //清空消息
                fnCloseNew: function () {
                    message_data = [];
                    this.chats = message_data;
                } //endfnClose
            }, //end
            filters: {
                formatTime: function (v) {
                    return new Date(v).popular();
                }
            }

        }); //endvue
    }
</script>
